<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="vue_det">
        message==> {{message}}
        number==> {{number}}
        <ul>
            <li v-for="item in fruits">{{item}}</li>
        </ul>
        <input value="add" type="button" @click="add()" />
    </div>
    <script>
        var vm = new Vue({
            el: "#vue_det",
            data: {
                message: "消息",
                number: "数字",
                fruits: ['apple', 'banana', 'pear'],
            },
            methods: {
                add: function () { 
                    this.fruits.push("pear");
                },
            },
        });
    </script>
</body>

</html>